<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="false" title="首页" :border-bottom="false" :title-bold="true"></u-navbar>
		</view>
		<view class="container_B" @click="goSearch">
			<u-search placeholder="请输入商品名称" :disabled="true"></u-search>
		</view>
		<view class="container_br">
			<u-swiper :list="list" mode="rect" height="500"></u-swiper>
		</view>
		<view class="notice">
			<u-notice-bar mode="vertical" :list="noticeList"></u-notice-bar>
		</view>
		<view class="zones" v-for="(c,index) in typeList" :key="index" v-if="typeList.length>0">
			<view class="goodsBox container_br">
				<view class="title">
					<h1>{{c.name}}</h1>
				</view>
				<view class="goodsList jsbw">
					<view class="item" v-for="item in c.list" :key="item.id" @click="goGoodsDetail(item.id)">
						<view class="goods">
							<view class="img">
								<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
							</view>
							<view class="name">
								{{item.name}}
							</view>
							<view class="price_l flc">
								<view class="price">
									￥{{item.min_price}}
								</view>
								<view class="lprice ml2">
									￥{{item.scribed_price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container_br point goodsBox" v-if="pointGoods.length>0">
			<view class="title">
				<h1>积分商城</h1>
			</view>
			<view class="goodsList jsbw">
				<view class="item" v-for="item in pointGoods" :key="item.id" @click="goDetail(item.id)">
					<view class="goods">
						<view class="img">
							<image :src="item.images_format[0]" mode="widthFix" style="width: 300rpx;"></image>
						</view>
						<view class="name">
							{{item.name}}
						</view>
						<view class="price_l flc">
							<view class="price">
								{{item.point}}
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :content="content" :zoom="true"></u-modal>

	</view>
</template>
<script>
	import {
		getGoodsList,
		getNotice,
		getSwiper,
		getPointGoods,
		getZones,
		getZonesList
	} from '@/api/index.js'
	import baseUrl from '@/config/config.js'
	import {
		closeload,
		tiao,
		toastload
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				list: [],
				pointGoods: [],
				noticeList:[],
				pointPage: 1,
				pointFlag: false,
				typeList: [],
				typePage:1,
				typeFlag:false,
				currentIndex:0,
				show: true,
				content: " 每日09-17时在线预约抢酒 18时在“我的预约”自行查看并及时付款，错过付款期限视为放弃购买，付款时间为4个小时,超时请重新购买"
			}
		},
		onLoad() {
			this.init()
			this.show = true
		},
		onShow() {},
		// 上拉加载
		onReachBottom() {
			console.log("到底",this.currentIndex,this.typeList[this.currentIndex].flag);
			if(this.typeList[this.currentIndex].flag){
				this.getGoods(this.typeList[this.currentIndex],this.currentIndex)
			}else{
				if(this.pointFlag){
					this.getPointG()
				}
			}
		},
		methods: {
			init() {
				toastload()
				this.getType()
				getSwiper().then(res => {
					console.log("轮播图", res);
					if (res.data.length == 0) return
					this.list = res.data.map(item => {
						return item.image_format
					})
					closeload()
				})
				getNotice().then(res => {
					console.log('通知', res);
					this.noticeList = res.data.map(item => {
						return item.title
					})
					closeload()
				})
				
			},
			getType(){
				toastload()
				getZones({
					page:this.typePage
				}).then(res=>{
					if(res.last_page>res.page){
						this.typePage++
						this.typeFlag = true
					}else{
						this.typeFlag = false
					}
					if(res.list.length>0){
						res.list.forEach(item=>{
							this.typeList.push({
								...item,
								flag:false,
								page:1,
								list:[]
							})
						})
						this.getGoods(this.typeList[this.currentIndex],this.currentIndex)
						
					}
				})
			},
			getGoods(item,index) {
				toastload()
				getZonesList(item.id,{
					page: item.page
				}).then(res => {
					console.log("商品", res);
					if (res.last_page > res.page) {
						this.typeList[index].page++
						this.typeList[index].flag = true
					} else {
						console.log("加载");
						this.typeList[index].flag = false
						if(this.typeList.length-1>this.currentIndex){
							this.currentIndex++
							this.getGoods(this.typeList[this.currentIndex],this.currentIndex)
						}else{
							this.pointFlag = true
						}
					}
					if(res.list.length>0){
						res.list.forEach(item=>{
							this.typeList[index].list.push(item)
						})
					}
					closeload()
				})
			},
			getPointG() {
				toastload()
				getPointGoods({
					page: this.pointPage
				}).then(ress => {
					console.log('积分商城商品', ress);
					
					if (ress.last_page > ress.page) {
						this.pointPage++
						this.pointFlag = true
					} else {
						this.pointFlag = false
					}
					if(ress.list.length>0){
						ress.list.forEach(item=>{
							this.pointGoods.push(item)
						})
					}
					closeload()
				})
			},
			goGoodsDetail(id) {
				tiao('/page/goodsDetail/goodsDetail?id=' + id)
			},
			goDetail(id) {
				let obj = {
					goods_id: id
				}
				tiao('/page/pointGoodsDetail/pointGoodsDetail', obj)
			},
			goSearch() {
				uni.navigateTo({
					url: '/page/search/search'
				})
			}

		}
	}
</script>
<style lang="scss" scoped>
	.box {
		min-width: 750rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}

	.goodsBox {
		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.item {
			width: 320rpx;
			min-height: 400rpx;
			box-shadow: 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
			padding: 10rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.name {
				width: 300rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.price {
				color: $u-type-error;
			}

			.lprice {
				text-decoration: line-through;
				color: #666;
			}
		}
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}


	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>